<template>
    <view class="person">
        <view class="minela">
            <view class="navig">
                <view>
                    <text>头像</text>
                </view>
                <view style="display: flex;align-items: center;" @click="changeImg">
                    <image style="width: 80rpx;height: 80rpx;margin: 0 10px 0 0;border-radius: 50%;" class="rightarrow" :src="photos">
                    </image>
                    <image class="rightarrow" src="../../static/img/arrowright.png"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import {baseUrlmember} from "../../untils/auth.js";
    export default {
        data() {
            return {
                nickName: '',
                photos: ''
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
            this.personListfn();
        },
        onShow() {
            this.personListfn();
        },
        onBackPress(e){
          console.log("监听返回按钮事件",e);
          uni.switchTab({
            url:"/pages/mine/mine"
          }) 
          // 此处一定姚要return为true，否则页面不会返回到指定路径
          return true;
        },

        methods: {
            personListfn() {
                request.postMember('/user/info/queryUserInfo', {
                    userId: uinfo.userId,
                }).then(res => {       
                    if (res.code == '200') {
                        this.nickName = res.data.nickname;
                        this.photos = res.data.avatar;
                        
                    }else{
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //更换头像
            changeImg() {
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album'], //从相册选择
                    success: (chooseImageRes) => {              
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        uni.uploadFile({
                            url: baseUrlmember() + '/user/upload/imgUpload',
                            filePath: tempFilePaths[0],
                            name: 'imageFile',
                            header: {
                                "Authorization": 'bearer ' + uinfo.token,
                                "Accept": "application/json;charset=UTF-8",
                            },
                            success: (uploadFileRes) => {                             
                                let datapars = JSON.parse(uploadFileRes.data);                               
                                if (datapars.code == '200') {
                                    request.postMember('/user/info/updateHeadImg', {
                                        userId: uinfo.userId,
                                        headImgUrl: datapars.data
                                    }).then(res => {                                        
                                        if (res.code == '200') {                                           
                                            this.photos = datapars.data;
                                            uni.showToast({
                                                icon: "none",
                                                title: '更换成功',
                                            });
                                        }else{
                                            uni.showToast({
                                                icon: "none",
                                                title: res.message,
                                            });
                                        }
                                    })
                                }
                            }
                        });
                    }
                });
            }
        }
    }
</script>

<style>
    .person {
        background-color: #F5F5F5;
        height: 93.3vh;
    }

    .minela {
        width: 710rpx;
        height: 108rpx;
        background: #FFFFFF;
        margin: 0 auto 20rpx;
        border-radius: 6px;
    }

    .minela .navig {
        display: flex;
        height: 108rpx;
        align-items: center;
        margin: 0 60rpx 0 40rpx;
        justify-content: space-between;
    }

    .minela text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 27px;
        color: #333333;
    }

    .minela .rightarrow {
        width: 14rpx;
        height: 22rpx;
    }
</style>
